<template>
	<view class="content">
		<view class="position_bgs">

			
			 <view class="bgs_circle">
				<image class="qin_cir1" src="../../static/images/healthy/u275.svg" mode=""></image>
				<image  class="qin_cir2" src="../../static/images/healthy/u289.svg" mode=""></image>
				<image  class="qin_cir3" src="../../static/images/healthy/u288.svg" mode=""></image>
				<image  class="qin_cir4" src="../../static/images/healthy/u291.svg" mode=""></image>
			</view> 
			
			
			
		</view>
		<view class="vin_card">
			<image style="width:48rpx;height:48rpx;margin-right:20rpx" src="../../static/images/healthy/u274.png" mode=""></image>
			<view>京A54DD12</view>
		</view>
		<view>
			<view class="tan_left">
				<image class="bgs_san_jiao_left" src="../../static/images/healthy/u258.svg" mode=""></image>
				<image class="bgs_san_jiao_center" src="../../static/images/healthy/u257.svg" mode=""></image>
				<image class="bgs_san_jiao_right" src="../../static/images/healthy/u256.svg" mode=""></image>
			</view>
			
		</view>
		<view class="dian">
			<view class="dian_ci">
				电池健康评估报告
			</view>
			<view>
				<view class="tan_right">
					<image class="bgs_san_jiao2_left" src="../../static/images/healthy/u256.svg" mode=""></image>
					<image class="bgs_san_jiao2_center" src="../../static/images/healthy/u257.svg" mode=""></image>
					<image class="bgs_san_jiao2_right" src="../../static/images/healthy/u258.svg" mode=""></image>
				</view>
				
			</view>
		</view>
		<view class="bao_gao">
			<view class="bao_gao_left">
				比亚迪 秦PLUS 2024款 荣耀版 EV
			</view>
			<view class="bao_gao_right">
				报告生成时间:2024-9-17 17:28:01
			</view>
		</view>
		<!-- 评分 -->
		<view class="scope">
			综合评分
		</view>
		<view class="scope_wrap">
			<view class="scope_bom">
				98
			</view>
		</view>
		<view class="batter">
			<text>电池健康级别:健康</text>	
		</view>
		<view class="batter_btn">
			<view class="batter_btn_left">
				<text style="margin-right:12rpx">电池剩余容量</text>
				<text style="font-size:32rpx">84%</text>
			</view>
			<view class="batter_btn_right">
				<text style="margin-right:12rpx">电池衰减度</text>
				<text style="font-size:32rpx">34%</text>
			</view>
		</view>
		
		<!-- <view class="batter_base">
			<text>电池基本信息</text>	
		</view> -->
		<view class="health_major" style="margin-bottom: 60rpx;">
			<image class="major_1" src="../../static/images/healthy/u283.svg" mode=""></image>
			<image class="major_2" src="../../static/images/healthy/u284.svg" mode=""></image>
			<image class="major_3 batter_3" src="../../static/images/healthy/u286.svg" mode=""></image>
			<image class="major_4 batter_4" src="../../static/images/healthy/u287.svg" mode=""></image>
			<view class="major_name">电池基本信息</view>
		</view>
		
		<view class="base_con">
			<view class="base_con1">
				<view class="base_item" v-for="item in batterInfo1">
					<view class="con_name">
						{{item.type}}
					</view>
					<view class="con_value">
					<text>{{item.value}}</text>	
					<text>{{item.unit}}</text>
					</view>
				</view>
			</view>
			<view class="base_con2">
				<view class="base_item" v-for="item in batterInfo2">
					<view class="con_name">
						{{item.type}}
					</view>
					<view class="con_value">
					<text>{{item.value}}</text>	
					<text>{{item.unit}}</text>
					</view>
				</view>
			</view>
			<view class="base_con3">
				<view class="base_item" v-for="item in batterInfo3">
					<view class="con_name">
						{{item.type}}
					</view>
					<view class="con_value">
					<text>{{item.value}}</text>	
					<text>{{item.unit}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 健康评估 -->
		<view class="ansy">
			
				<view class="health_major" style="margin-bottom: 60rpx;">
					<image class="major_1" src="../../static/images/healthy/u283.svg" mode=""></image>
					<image class="major_2" src="../../static/images/healthy/u284.svg" mode=""></image>
					<image class="major_3" src="../../static/images/healthy/u286.svg" mode=""></image>
					<image class="major_4" src="../../static/images/healthy/u287.svg" mode=""></image>
					<view class="major_name">健康评估指标分析</view>
				</view>
				
				
			
			<view class="ansy_right">
				电池健康得分:98.0
			</view>
		</view>
		<view class="dian_ci">
			<cus-echarts refName='radarRef'  :option='radarOption'></cus-echarts>
		</view>
		<view class="ansy_btn_wrap">
		<view class="ansy_btn">
			打败同车型75%的用户
		</view>
		</view>
		<!-- 近期充电情况分析 -->
		<view class="ansy">
			
				<view class="health_major">
					<image class="major_1" src="../../static/images/healthy/u283.svg" mode=""></image>
					<image class="major_2" src="../../static/images/healthy/u284.svg" mode=""></image>
					<image class="major_3 charge_1" src="../../static/images/healthy/u286.svg" mode=""></image>
					<image class="major_4 charge_2" src="../../static/images/healthy/u287.svg" mode=""></image>
					<view class="major_name">近期充电情况分析</view>
				</view>
			
			<view class="ansy_date_btn">
				<view class="date_mounth">
					近三个月
				</view>
				<view class="date_division">
					|
				</view>
				<view class="date_year">
					近半年
				</view>
			</view>
		</view>
		
		<view class="charge_analysis">
			<view class="charge_analysis_item" v-for="item in chargeAnalysis">
				<view class="charge_analysis_value">
					{{item.value}}
					<text style="font-size: 24rpx;">{{item.unit}}</text>
				</view>
				<view class="charge_analysis_name">
				<text>{{item.name}}</text>	
				</view>
			</view>
		</view>
		<view class="ansy">
			<view class="ansy_left">
				异常订单原因分析
			</view>
		</view>
		<view class="err_cir">
			<cus-echarts refName='cirRef' :option='engPieOption'></cus-echarts>
		</view>
		
		<view class="ansy">
			<view class="ansy_left">
				异常订单预警详情
			</view>
			<view class="ansy_date_btn">
				<view class="date_year">
					默认展示近五次预警订单
				</view>
			</view>
		</view>
		<view class="abnormal_order">
			<view class="order_item" v-for="item in abnormalOrder">
				<view class="order_icon">
					
				</view>
				<view class="order_type">
					{{item.type}}
				</view>
				<view class="order_di">
					|
				</view>
				<view class="order_name">
					{{item.name}}
				</view>
			</view>
		</view>
		
		
		<view class="order_wrap">
		<view class="order_btn">
			查看更多
		</view>
		</view>
		<view class="health_major">
			<image class="major_1" src="../../static/images/healthy/u283.svg" mode=""></image>
			<image class="major_2" src="../../static/images/healthy/u284.svg" mode=""></image>
			<image class="major_3" src="../../static/images/healthy/u286.svg" mode=""></image>
			<image class="major_4" src="../../static/images/healthy/u287.svg" mode=""></image>
			<view class="major_name">电池健康专业分析</view>
		</view>
		
		<view class="ansy">
			<view class="ansy_left">
				SOC一致性
			</view>
			<view class="ansy_date_btn">
				<view class="date_year">
					得分
				</view>
				<view class="date_division">
					:
				</view>
				<view class="date_mounth">
					100
				</view>
			</view>
		</view>
		<view class="soc_tit">
			这是您的爱车历史充电订单中，每笔订单电池组SOC变化的情况。SOC速率波动性越小电池越稳定。
		</view>
		<view class="line">
			<cus-echarts refName='engRef' :option='engLineOption'></cus-echarts>
		</view>
		<!-- 电压一致 -->
		<view class="ansy">
			<view class="ansy_left">
				电压一致性
			</view>
			<view class="ansy_date_btn">
				<view class="date_year">
					得分
				</view>
				<view class="date_division">
					:
				</view>
				<view class="date_mounth">
					97
				</view>
			</view>
		</view>
		<view class="soc_tit">
			这是您的爱车历史充电订单中，每笔订单各单体电池之间电压差的情况，电压波动越小，电池越稳定。
		</view>
		<view class="line">
			<cus-echarts refName='voltageRef' :option='voltageOption'></cus-echarts>
		</view>
		<view class="ansy">
			<view class="ansy_left">
				单体最高电压变化趋势
			</view>
		</view>
		<view class="soc_tit">
			这是您的爱车历史充电订单中，每笔订单电池最高电压的变化情况，电压波动越小，电池越稳定。
		</view>
		<view class="line">
			<cus-echarts refName='voltageMaxRef' :option='voltageMaxOption'></cus-echarts>
		</view>
		<!-- 最高电压分布 -->
		<view class="ansy">
			<view class="ansy_left">
				单体最高电压分布
			</view>
		</view>
		<view class="soc_tit">
			这是您的爱车历史充电订单中，电池包中最高单体动力电池电压所在编号的频次，单体电压频次集中，可能会影响您电池的充电量，导致充不满或电池过充。
		</view>
		<view class="line">
			<cus-echarts refName='sinMaxRef' :option='sinMaxOption'></cus-echarts>
		</view>
		<view class="soc_tit">
			近期充电订单，<text style="color: red;">2#电池组</text>出现最高电压次数最多，请留意电池预警信息
		</view>
		<!-- voltageMaxOption -->
		
		<!-- 温度致 -->
		<view class="ansy">
			<view class="ansy_left">
				温度一致性
			</view>
			<view class="ansy_date_btn">
				<view class="date_year">
					得分
				</view>
				<view class="date_division">
					:
				</view>
				<view class="date_mounth">
					97
				</view>
			</view>
		</view>
		<view class="soc_tit">
			这是您的爱车历史充电订单中，每笔订单各温度探针的温度极差情况，温差波动越小，电池越稳定。
		</view>
		<view class="line">
			<cus-echarts refName='temRef'  :option='temperatureOption'></cus-echarts>
		</view>
		
		<!-- 单体最高温度变化趋势 -->
		<view class="ansy">
			<view class="ansy_left">
				单体最高温度变化趋势
			</view>
			
		</view>
		<view class="soc_tit">
			这是您爱车历史充电订单中，每笔订单电池最高温度的变化情况，电池温控越好。
			</view>
		<view class="line">
			<cus-echarts refName='temChangeRef'  :option='temChangeOption'></cus-echarts>
		</view>
		<!-- 最大温升速率变化 -->
		<view class="ansy">
			<view class="ansy_left">
				最大温升速率变化
			</view>
		</view>
		<view class="soc_tit">
			这是您爱车历史充电订单中，每笔订单最大温升速率的变化情况，相同充电条件下，电池温控越好。
			</view>
		<view class="line">
			<cus-echarts :option='temUpOption'></cus-echarts>
		</view>
		
		<!-- sinTemOption -->
		
		<view class="ansy">
			<view class="ansy_left">
				单体最高温度分布
			</view>
		</view>
		<view class="soc_tit">
			这是您爱车历史充电订单中，电池包中最高温度探针所在编号出现的频次，温度探针频次越分散意味看电池的温控（电池保温和散热）越好。</view>
		<view class="line">
			<cus-echarts :option='sinTemOption'></cus-echarts>
		</view>
		<view class="soc_tit">
			近期充电订单，<text style="color: red;">5#电池组</text>出现最高温度次数较多，请留意电池预警信息
		</view>
		
	</view>
</template>

<script setup >
import { onMounted,ref,defineProps,watch, reactive} from 'vue'
// 引入echarts组件
import cusEcharts from '@/components/cusEcharts/index.vue'
const echarts = require('../../static/echarts.min.js')

import {lineOption,pieOption,radarChart,barOption} from '@/components/cusEcharts/option'
const chartData = ref({})
// 饼图
const engPieData = ref([
	{ product: '电池整包过压', count: 4 },
	{ product: '最大温升速率异常', count: 3 },
	{ product: '充电SOC超范围', count: 3 },
	{ product: '需求电压超过最高', count: 1 },	
])
const abnormalOrder= ref([
	{ type: '电池整包过压', name: '海南琼海市博鳌机场（2024-7-13 22:02）' },
	{ type: '最大温升速率异常', name: '海南琼海市博鳌机场（2024-7-13 22:02）'},
	{ type: '充电SOC超范围', name: '海南琼海市博鳌机场（2024-7-13 22:02）'},
	{ type: '需求电压超过最高', name: '海南琼海市博鳌机场（2024-7-13 22:02）'},	
])
const engPieOption = reactive(pieOption)
 engPieOption.dataset.source = engPieData.value
// 折现图
const engLineData =ref([
	  { product: '23-02-01', count: 0.1 },
	  { product: '23-02-02', count: 0.14},
	  { product: '23-02-03', count: 0.17},
	  { product: '23-02-04', count: 0.02},
	  { product: '23-02-05', count: 0.2},
	      { product: '23-02-06', count: 0.24},
])
// 电压数据
const voltageData = ref([
	{ product: '23', count: 0.1 },
	{ product: '24', count: 0.14},
	{ product: '23-02-03', count: 0.17},
	{ product: '23-02-04', count: 0.02},
	{ product: '23-02-05', count: 0.2},
{ product: '23-02-06', count: 0.24},
])
const voltageOption =  reactive(JSON.parse(JSON.stringify(lineOption)))
voltageOption.dataset.source = voltageData.value
voltageOption.yAxis.name ='压差（v）'
voltageOption.series[0].lineStyle.color ='#24b496'
voltageOption.series[0].itemStyle.normal.borderColor = '#24b496'
voltageOption.series[0].areaStyle.color
 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(36, 180, 150, 1)'
                    },
                    {
                        offset: 0.6,
                        color: 'rgba(36, 180, 150, 0.5)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(36, 180, 150, 0.1)'
                    }
                ])
				
				
// 单体最高电压变化
const voltageMaxData = ref([
	{ product: '23-02-01', count: 0.1 },
	{ product: '23-02-02', count: 0.14},
	{ product: '23-02-03', count: 0.17},
	{ product: '23-02-04', count: 0.02},
	{ product: '23-02-05', count: 0.2},
{ product: '23-02-06', count: 0.24},
])
const voltageMaxOption =  reactive(JSON.parse(JSON.stringify(lineOption)))
voltageMaxOption.dataset.source = voltageData.value
voltageMaxOption.yAxis.name ='最高电压（v）'

voltageMaxOption.series[0].lineStyle.color ='#24b496'
voltageMaxOption.series[0].itemStyle.normal.borderColor = '#24b496'
voltageMaxOption.series[0].areaStyle.color
 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                       offset: 0,
                       color: 'rgba(36, 180, 150, 1)'
                   },
                   {
                       offset: 0.6,
                       color: 'rgba(36, 180, 150, 0.5)'
                   },
                   {
                       offset: 1,
                       color: 'rgba(36, 180, 150, 0.1)'
                   }
                ])




// 最高电压分布
const sinMaxData = ref([
	{ product: '1', count: 0.1 },
	{ product: '2', count: 0.14},
	{ product: '3', count: 0.17},
	{ product: '4', count: 0.02},
	{ product: '5', count: 0.2},
	{ product: '6', count: 0.1 },
	{ product: '7', count: 0.14},
	{ product: '8', count: 0.17},
	{ product: '9', count: 0.02},
	{ product: '10', count: 0.2},
])


const sinMaxOption =  reactive(JSON.parse(JSON.stringify(barOption)))
sinMaxOption.dataset.source = sinMaxData.value
sinMaxOption.yAxis.name ='最高温度次数'


// 温度一致性
const temperatureData = ref([
	{ product: '23-02-01', count: 0.1 },
	{ product: '23-02-02', count: 0.14},
	{ product: '23-02-03', count: 0.17},
	{ product: '23-02-04', count: 0.02},
	{ product: '23-02-05', count: 0.2},
{ product: '23-02-06', count: 0.24},

])


const temperatureOption =  reactive(JSON.parse(JSON.stringify(lineOption)))
temperatureOption.dataset.source = temperatureData.value
temperatureOption.yAxis.name ='最大温差（℃）'

temperatureOption.series[0].lineStyle.color ='#e69c2d'
temperatureOption.series[0].itemStyle.normal.borderColor = '#e69c2d'
temperatureOption.series[0].areaStyle.color
 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(166, 113, 69, 1)'
                    },
                    {
                        offset: 0.6,
                        color: 'rgba(166, 113, 69, 0.5)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(166, 113, 69, 0.1)'
                    }
                ])
				
				
// 温度变化趋势
const temChangeData = ref([
	{ product: '23-02-01', count: 20 },
	{ product: '23-02-02', count: 14},
	{ product: '23-02-03', count: 47},
	{ product: '23-02-04', count: 32},
	{ product: '23-02-05', count: 62},
	{ product: '23-02-06', count: 24},
])
const temChangeOption =  reactive(JSON.parse(JSON.stringify(lineOption)))
temChangeOption.dataset.source = temChangeData.value
temChangeOption.yAxis.name ='最高温度（℃）'
temChangeOption.series[0].lineStyle.color ='#e69c2d'
temChangeOption.series[0].itemStyle.normal.borderColor = '#e69c2d'
temChangeOption.series[0].areaStyle.color
 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(166, 113, 69, 1)'
                    },
                    {
                        offset: 0.6,
                        color: 'rgba(166, 113, 69, 0.5)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(166, 113, 69, 0.1)'
                    }
                ])

// 最大温差升速
const temUpData = ref([
	{ product: '23-02-01', count: 20 },
	{ product: '23-02-02', count: 14},
	{ product: '23-02-03', count: 47},
	{ product: '23-02-04', count: 32},
	{ product: '23-02-05', count: 62},
	{ product: '23-02-06', count: 24},
])
const temUpOption =  reactive(JSON.parse(JSON.stringify(lineOption)))
temUpOption.dataset.source = temUpData.value
temUpOption.yAxis.name ='℃/分钟'
temUpOption.series[0].lineStyle.color ='#e69c2d'
temUpOption.series[0].itemStyle.normal.borderColor = '#e69c2d'
temUpOption.series[0].areaStyle.color
 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(166, 113, 69, 1)'
                    },
                    {
                        offset: 0.6,
                        color: 'rgba(166, 113, 69, 0.5)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(166, 113, 69, 0.1)'
                    }
                ])
				
				
// 单体最高温度分布
const sinTemData = ref([
	{ product: '23-02-01', count: 20 },
	{ product: '23-02-02', count: 14},
	{ product: '23-02-03', count: 47},
	{ product: '23-02-04', count: 32},
	{ product: '23-02-05', count: 62},
	{ product: '23-02-06', count: 24},
	{ product: '01', count: 21 },
		{ product: '02', count: 34},
		{ product: '03', count: 47},
		{ product: '234', count: 22},
		{ product: '2305', count: 52},
	{ product: '206', count: 24},
])
const sinTemOption =  reactive(JSON.parse(JSON.stringify(barOption)))
sinTemOption.dataset.source = sinTemData.value
sinTemOption.yAxis.name ='最高温度次数'

sinTemOption.series[0].itemStyle.color
 
 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(166, 113, 69, 1)'
                    },
                    {
                        offset: 0.6,
                        color: 'rgba(166, 113, 69, 0.5)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(166, 113, 69, 0.1)'
                    }
                ])




const engLineOption = reactive(JSON.parse(JSON.stringify(lineOption)))
engLineOption.dataset.source = engLineData.value
engLineOption.yAxis.name ='soc速率'
const chargeAnalysis = reactive([
	{name:"近三个月充电订单（笔）",value:27,unit:'笔'},
	{name:"异常订单数",value:4,unit:'笔'},
	{name:"异常率",value:14.8,unit:'%'},]);
	
const batterInfo1 = reactive([
	{type:"电池类型",value:'三元材料电池',unit:''},
	{type:"额定容量",value:'124.8',unit:'Ah'},
	{type:"标称总能量",value:'74.5',unit:'kWh'},
	])
const batterInfo2 = reactive([
	{type:"当前电池估价",value:'12944',unit:'元'},
	{type:"电池剩余容量",value:'79.6',unit:'Ah'},
	{type:"电池故障率",value:'1.6',unit:'%'},
	])
const batterInfo3 = reactive([
	{type:"最高允许充电总电压",value:'398.4',unit:'v'},
	{type:"单体最高允许充电电压",value:'5.6',unit:'v'},
	{type:"电池最高允许温度",value:'45',unit:'℃'},
	])
function getData(){
	setTimeout(()=>{
		chartData.value = {
			categories:['2012','2013','2014','2015'],
			series:[{
				name:'目标值',
				data:[20,23,25,87]
			},{
				name:'完成量',
				data:[54,26,45,67]
			}]
		}
	},500)
}

onMounted(()=>{
	getData();
})

const radarOption = reactive(radarChart)

let man = [100, 90, 80, 66, 9]
	const woman = [20, 30, 40, 56, 1]
	 const total = []
	  man.forEach((item, index) => {
	    let max = item > man[index] ? index : man[index]
	    max = max > 0 ? max * 1.5 : 10
	    total.push(max)
	  })
	  const indicator = [
	    {
	      name: '电池容量',
	      max: total[0],
	    },
	    {
	      name: '最高电压',
	      max: total[1],
	    },
	    {
	      name: '最高温度',
	      max: total[2],
	    },
	    {
	      name: '电压一致性',
	      max: total[3],
	    },
	    {
	      name: '温度一致性',
	      max: total[4],
	    },
	    {
	      name: 'SOC一致性',
	      max: total[5],
	    }
	  ]
radarOption.radar.indicator = indicator
radarOption.series[0].data[0].value = man
</script>
<style>
.content {
		background: linear-gradient(89.59104588699104deg, rgba(37, 28, 93, 1) 5%, rgba(44, 31, 119, 1) 55.00000000000001%, rgba(36, 25, 102, 1) 96%);
		padding: 40rpx;
		position: relative;
	}
.position_bgs{
	width:100%;
	height: 600rpx;
	position: absolute;
	top:0;
	left:0
}
.bgs_san_jiao{
	position: absolute;
	top:160rpx;
	left:200rpx;
}	
.bgs_san_jiao_left{
	width: 34rpx;
	height:  26rpx;
	transform: rotate(270deg);
	margin-right: 4rpx;
}	
.bgs_san_jiao_center{
	width: 32rpx;
	height:  24rpx;
	transform: rotate(270deg);
	margin-right: 4rpx;
}
.bgs_san_jiao_right{
	width: 30rpx;
	height:  22rpx;
	transform: rotate(270deg);
}
.bgs_san_jiao2_left{
	width: 30rpx;
	height:  22rpx;
	transform: rotate(90deg);
	margin-right: 4rpx;
}	
.bgs_san_jiao2_center{
	width: 32rpx;
	height:  24rpx;
	transform: rotate(90deg);
	margin-right: 4rpx;
}
.bgs_san_jiao2_right{
	width: 34rpx;
	height:  26rpx;
	transform: rotate(90deg);
}
.bgs_circle{
	position: absolute;
	right: 0;
	top:0;
	width:400rpx;
}
.qin_cir1{
	position: absolute;
	right: 300rpx;
	top:40rpx;
	width: 56rpx;
	height: 56rpx;
}
.qin_cir2{
	position: absolute;
	right: 240rpx;
	top:180rpx;
	width: 40rpx;
	height: 40rpx;
}
.qin_cir3{
	position: absolute;
	right: 20rpx;
	top:40rpx;
	width: 200rpx;
	height: 200rpx;
}
.qin_cir4{
	position: absolute;
	right: 20rpx;
	top:200rpx;
	width: 56rpx;
	height: 56rpx;
	z-index: 4;
}

	.vin_card{
		    font-family: '苹方-简 常规体', '苹方-简 中黑体', '苹方-简', sans-serif;
		margin-top: 80rpx;
		height: 76rpx;
		width: 340rpx;
		border-radius: 76rpx;
		background-color: rgba(222, 217, 255, 1);
		color:#271A73;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.34901960784313724);
		font-size: 40rpx;
		text-align: center;
		line-height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tan_left{
		padding-top: 40rpx;
		/* width:80rpx; */
		/* height: 40rpx; */
		margin-top: 20rpx;
		
		margin-bottom: 12rpx;
	}
	.dian_ci{
		font-size: 60rpx;
		color: rgb(255, 243, 243);
		    font-weight: 400;
		    font-style: normal;
		 
			
		letter-spacing: 6rpx;
		
	}
	.tan_right{
		position: absolute;
		top:30rpx;
		left:540rpx;		
		margin-top: 20rpx;
		margin-bottom: 12rpx;
	}
	.dian{
		position: relative;
	}
	.bao_gao{
		display: flex;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		justify-content: space-between;
	}
	.bao_gao_left{
		width: 300rpx;
		text-indent: 10rpx;
		height:46rpx;
		color: #fff;
		line-height: 46rpx;
		    background: linear-gradient(90deg, rgba(73, 80, 188, 1) 0%, rgba(43, 31, 115, 1) 100%);
		overflow: hidden;
	}
	.bao_gao_right{
		width: 300rpx;
		text-indent: 10rpx;
		height:46rpx;
		color: #fff;
		line-height: 46rpx;
		  overflow: hidden;
		  
		      background: linear-gradient(90deg, rgba(73, 80, 188, 0.5) 0%, rgba(43, 31, 115, 0.5) 100%);
	}
.scope{
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	font-size: 40rpx;
	text-align: center;
	font-weight: 500;
}
.scope_wrap{
	display: flex;
	justify-content: center;
}
.scope_bom{
	width: 240rpx;
	height:240rpx;
	background-image: url('../../static/images/healthy/u263.png');
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36px;
	color: #40d9ef;
}
.batter{
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	font-size: 36rpx;
	text-align: center;
	color: #40d9ef;
	letter-spacing: 6rpx;
}
.batter_btn{
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0 60rpx 0;
}
.batter_btn_left{
	width: 46%;
	height:80rpx;
	line-height: 80rpx;
	color: #fff;
	text-align: center;
 background: url('../../static/images/healthy/u266.svg'); 
	    background: linear-gradient(180deg, rgba(38, 24, 125, 1) 0%, rgba(72, 78, 185, 1) 99%);
	
	/* background-size: 54rpx 42rpx; */
	background-repeat: no-repeat;
	border-radius: 20rpx;
}
.batter_btn_right{
	width: 46%;
	height:80rpx;
	line-height: 80rpx;
	color: #fff;
	text-align: center;
    background: linear-gradient(180deg, rgba(47, 29, 121, 1) 0%, rgba(149, 42, 162, 1) 98%);
	border-radius: 20rpx;
}
.batter_base{
	font-size: 40rpx;
	color: #fff;
	margin-bottom: 40rpx;
}
.base_con{
	width: 100%;
	height: 440rpx;
	border-radius: 20rpx;
	border: solid 1px #3e3091;
	background-color: #2c207b;
}
.base_con1{
	display: flex;
	height: 140rpx;
	margin: 0 20rpx;
	justify-content: space-around;
	border-bottom: solid 1px #3655a0;
}
.base_con2{
	display: flex;
	height: 140rpx;
	margin: 0 20rpx;
	justify-content: space-around;
	border-bottom: solid 1px #3655a0;
}
.base_con3{
	display: flex;
	height: 140rpx;
	margin: 0 20rpx;
	justify-content: space-around;
}
.base_item{
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
}
.con_name{
	padding-top: 20rpx;
	font-size: 24rpx;
	color: #a8a3cc;
	margin-bottom: 12rpx;
}
.con_value{
	font-size: 32rpx;
	color: #fff;
	margin-bottom: 40rpx;
}
.ansy{
	display: flex;
	padding: 50rpx 0;
	justify-content: space-between;
	align-items: center;
}
.ansy_left{
	color: #fff;
	font-size: 40rpx;	
	position: relative;
	/* border-left: solid 6rpx #952aa2; */
	padding-left: 20rpx;
}
.ansy_left::before{
	content: '';
	width:8rpx;
	display: block;
	height: 36rpx;
	background-color: #952aa2;
	position: absolute;
	top: 12rpx;
	color: #fff;
	left: 0;
}
.ansy_right{
	border: solid 1px #443699;
	border-radius: 30rpx;
	height: 50rpx;
	line-height: 50rpx;
	text-align: center;
	color: #287ee0;
	padding: 0 10rpx;
	font-size: 20rpx;
	margin-bottom: 60rpx;
}
.ansy_btn_wrap{
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.ansy_btn{
	width:60% ;
	height: 60rpx;
	color: #3fcce8;
	text-align: center;
	border: solid 1px #2e51b9;
	line-height: 60rpx;
	font-size: 26rpx;
	border-radius: 10rpx;
	background-color: #2b2086;
	margin-bottom: 80rpx;
}

.ansy_date_btn{
	display: flex;
	color: #fff;
	font-size: 24rpx;
	align-items: center;
}
.date_mounth{
	color: #2772d0;
}
.date_division{
	margin: 0 12rpx;
}
.charge_analysis{
	display: flex;
	justify-content: space-between;
	margin-bottom: 60rpx;
}
.charge_analysis_value{
	text-align: center;
	color: #288beb;
	font-size: 40rpx;
	margin-bottom: 20rpx;
}
.charge_analysis_name{
	color: #fff;
	font-size: 26rpx;
}

.order_item{
	display: flex;
	color: #fff;
	font-size: 28rpx;
	align-items: center;
	height: 60rpx;
	line-height: 60rpx;
	margin-bottom: 20rpx;
}
.order_icon{
	width: 18rpx;
	height: 18rpx;
	border-radius: 50%;
	background-color: #595ede;
	margin-right: 12rpx;
}
.order_type{
	width: 30%;
	height: 60rpx;
	overflow: hidden;
	text-indent: 10rpx;
	background: linear-gradient(90deg, rgba(73, 80, 188, 1) 0%, rgba(43, 31, 115, 1) 100%);
}
.order_di{
	margin: 0 10rpx;
	
}
.order_name{
	width: 60%;
	overflow: hidden;
	height: 60rpx;
}
.order_wrap{
	display: flex;
	justify-content: center;
	padding-top: 30rpx;
}
.order_btn{
	width: 200rpx;
	height: 60rpx;
	color: #3fcce8;
	text-align: center;
	border: solid 1px #2e51b9;
	line-height: 60rpx;
	font-size: 26rpx;
	border-radius: 10rpx;
	background-color: #2b2086;
	margin-bottom: 80rpx;
	
}
.health_major{
	color:#fff;
	font-size: 40rpx;
	position: relative;
	height: 60rpx;
	line-height: 60rpx;
}

.major_name{
	position: relative;
	z-index: 4;
}
.major_1{
	position: absolute;
	top: -14rpx;
	left: 0rpx;
	width:65rpx;
	height:45rpx;
}
.major_2{
	position: absolute;
	top: -14rpx;
	left: 0rpx;
	width:65rpx;
	height:45rpx;
}
.major_3{
	position: absolute;
	top: 15rpx;
	left: 340rpx;
	width:34rpx;
	height:34rpx;
}
.major_4{
	position: absolute;
	top: 15rpx;
	left: 368rpx;
	width:34rpx;
	height:34rpx;
}

.batter_3{
	left:260rpx
}
.batter_4{
	left: 288rpx;
}
/* .charge_1{
	left: 340rpx;
}
.charge_2{
	left: 328rpx;
} */
.soc_tit{
	width: 100%;
	padding: 10rpx 20rpx;
	line-height: 34rpx;
	color: #fff;
	background: #2c207b;
	border: solid 1px #3d2f8e;
	border-radius: 12rpx;
	font-weight: 300;
	font-size: 24rpx;
}
</style>
